import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';
import { Route, BrowserRouter as Router, Link } from 'react-router-dom';
import Login from './pages/login';
import Register from './pages/register';
import Article from './pages/article';
import './App.css';

const { Header, Sider, Content, Footer } = Layout;

export default class App extends Component {
  state = {
    collapsed: false,
  };
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }
  render() {
    return (
      <Router>
        <Layout>
          <Sider
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
          >
            <div className="logo" />
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['login']}>
              <Menu.Item key="1">
                <Icon type="login" />
                <span><Link to="/">登录</Link></span>
              </Menu.Item>
              <Menu.Item key="register">
                <Icon type="video-camera" />
                <span><Link to="/register">注册</Link></span>
              </Menu.Item>
              <Menu.Item key="3">
                <Icon type="upload" />
                <span><Link to="/article">我的文章</Link></span>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout>
            <Header style={{ background: '#fff', paddingLeft: 16 }}>
              <Icon
                className="trigger"
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggle}
              />
            </Header>
            <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
              <Route path="/" exact component={Login}/>
              <Route path="/register" exact component={Register}/>
              <Route path="/article" exact component={Article}/>
            </Content>
            <Footer style={{ textAlign: 'center' }}>
              antd-express-mongoose by chensai@2018
            </Footer>
          </Layout>
        </Layout>
      </Router>
    );
  }
}
